<template>
    <div class="ball" v-show="DLBvalue && DLBvalue>'0'">
        <img src="../../assets/ball.png">
        <div class="value">{{ DLBvalue }}</div>
        <div class="text">{{ name }}</div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    props:['name'],
    computed: {
        ...mapState('user', [
          'DLBvalue'
        ])
    },
    watch:{
        DLBvalue(curval,oldval){
            console.log(`最新值${curval}--旧值${oldval}`)
        }
    }
}
</script>

<style lang="stylus" scoped>
.ball{
    width:72px;
    height:72px;
    position:absolute;
    bottom: 55px;
    left: 15px;
    img{
        width:72px;
        height:72px;
    }
    .value{
        position:absolute;
        left:0;
        top: 20px;
        width: 100%;
        text-align: center;
        color: #fff;
        font-weight:bold;
    }
    .text{
        position:absolute;
        left:0;
        bottom: 14px;
        width: 100%;
        text-align: center;
        color: #0055A4;   
        font-size:12px;
    }
}  
</style>